@import "../../var";
@import "../../mixin";
.gzl-calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: px(375);
  margin: auto;
  &.gzl-calendar_popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $clr-white;
    z-index: 9;
    opacity: 0;
    transition: all .3s;
    &.show {
      opacity: 1;
    }
  }
  .prev-btn,
  .next-btn {
    position: absolute;
    top: px(16);
    bottom: 0;
  }
  .prev-btn {
    left: px(16);
  }
  .next-btn {
    right: px(16);
  }
  .gzl-calendar__top {
    background: #fff;
    text-align: center;
    padding: px(16);
  }
  .gzl-calendar__nav {
    background: #fff;
    ul {
      display: flex;
      background: #fff;
      &.auto{
        display: block;
        white-space: nowrap;
        font-size: 0;
        overflow: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        @include calc(padding,0,5);
        li {
          display: inline-block;
          width: auto;
          @include calc(padding,10,15);
        }
      }
    }
    li {
      position: relative;
      flex: 1;
      width: 0;
      text-align: center;
      padding: px(10) 0;
      &.active {
        color: $clr-active;
        font-weight: bold;
        font-size: px(16);
        &:after {
          content: '';
          position: absolute;
          bottom: px(2);
          left: 0;
          right: 0;
          margin: auto;
          width: px(16);
          height: px(2);
          background: $clr-active;
        }
        p {
          color: $clr-active;
        }
      }
      strong {
        display: inline-block;
        vertical-align: top;
        font-size: px(16);
      }
      p {
        font-size: px(12);
        color: #3F3F3F;
        margin-top: px(1);
      }
    }
  }
  .gzl-calendar__week {
    font-size: 0;
    background: #F7F7F7;
    text-align: center;
    span {
      display: inline-block;
      width: 14.28%;
      height: px(24);
      line-height: px(24);
      font-size: px(10);
      color: $clr-g6;
    }
  }
  .gzl-calendar__group {
    flex: 1;
    overflow: auto;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
  }
  .gzl-calendar__item {
    background: $clr-white;
  }
  .gzl-calendar__tit {
    padding: px(20) 0;
    font-size: px(16);
    text-align: center;
  }
  .gzl-calendar__blank {
    display: inline-block;
    width: 14.28%;
    text-align: center;
  }
  .gzl-calendar__grid {
    position: relative;
    &.disable {
      .gzl-calendar__hd,
      .gzl-calendar__day,
      .gzl-calendar__ft {
        color: $clr-gc;
      }
    }
    &.active,
    &.start-date,
    &.end-date,
    &.range-item {
      .gzl-calendar__hd,
      .gzl-calendar__day,
      .gzl-calendar__ft {
        color: $clr-active;
      }
    }
  }
  .gzl-calendar__hd {
    position: absolute;
    top: px(4);
    left: 0;
    right: 0;
    color: $clr-g9;
    font-size: px(10);
    &.gzl-calendar__cu {
      color: $clr-green;
    }
    &.gzl-calendar__jian {
      color: $clr-blue;
    }
    &.gzl-calendar__qiang {
      color: $clr-warn;
    }
    span {
      &:not(:first-child) {
        margin-left: px(6);
      }
    }
  }
  .gzl-calendar__day {
    height: px(60);
    line-height: px(60);
    font-size: px(16);
  }
  .gzl-calendar__ft {
    position: absolute;
    bottom: px(6);
    left: 0;
    right: 0;
    font-size: px(10);
  }
}
